<!--漏斗图-->
<template>
  <div
    class="chartcontainer"
    v-if="iffresh"
  >
    <div :style="{'margin-bottom':'10px'}" v-if="title">{{title}}</div>
    <!-- :judge-width="true" -->
    <ve-funnel
      :data="blockdata"
      width="100%"
      height="100%"
      ref="mychart"
      :theme="theme"
      :after-config="afterConfig"
      :judge-width="true"
      :settings="chartSettings"
    >
    </ve-funnel>
  </div>
</template>

<script>
import VeFunnel from "v-charts/lib/funnel.common";

export default {
  props: {
    chartData: [Object],
    changesizewidth: [Number, String],
    changesizeheight: [Number, String],
    theme: [Object],
    title: [String],
    searchid: [String],
    chartid: [String],
    mobiletype: [String],
    field: [String],
    isShowLegend: {
      type: Boolean,
      default: true
    },
    ascending: {
      type: Boolean,
      default: false
    }
  },
  data() {
    this.chartSettings = {
      useDefaultOrder: true,
      label: {
        show: true,
        position: 'inside'
      }
    };

    return {
      intervaltime: this.timer,
      blockdata: this.chartData,
      iffresh: true
    };

  },

  components: { VeFunnel },
  mounted() { },
  destroyed() { },
  methods: {
    afterConfig(options) {
      if (!this.isShowLegend) {
        options.legend = {
          data: []
        }
      }
      options.series.sort = (this.ascending ? 'ascending' : "funnel");

      return options;
    }
  },
  watch: {
    changesizewidth(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },

    changesizeheight(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    chartData(oldvalue, newvalue) {
      this.blockdata = oldvalue;
      ;
    }
  }
};
</script>
<style scoped lang="scss">
.chartcontainer {
  width: 100%;
  height: 100%;
}
</style>

